<template>
    <div class="model-viewer-page">
      <h1>多模型3D查看器</h1>
      
      <div class="global-controls">
        <div class="control-group">
          <label>背景颜色:</label>
          <input v-model="backgroundColor" type="color" />
        </div>
        
        <div class="control-group">
          <label>模型大小:</label>
          <input 
            v-model="targetSize" 
            type="range" 
            min="0.5" 
            max="10" 
            step="0.1"
          >
          <span>{{ targetSize }}</span>
        </div>
        
        <div class="control-group">
          <label>默认颜色:</label>
          <input v-model="defaultModelColor" type="color" />
        </div>
        
        <button @click="addModel">添加模型</button>
      </div>
      
      <div class="model-list">
        <div v-for="(model, index) in modelList" :key="index" class="model-item">
          <div class="model-info">
            <input v-model="model.name" placeholder="模型名称" />
            <select v-model="model.type">
              <option value="gltf">GLTF</option>
              <option value="glb">GLB</option>
              <option value="obj">OBJ</option>
              <option value="fbx">FBX</option>
              <option value="stl">STL</option>
              <option value="3mf">3MF</option>
            </select>
            <input v-model="model.url" placeholder="模型URL" />
            <input v-model="model.color" type="color" />
            <button @click="removeModel(index)" class="remove-btn">删除</button>
          </div>
        </div>
      </div>
      
      <MultiModelViewer
        v-if="modelList.length > 0"
        :model-list="modelList"
        :background-color="backgroundColor"
        :default-model-color="defaultModelColor"
        :target-size="targetSize"
        @loading="handleLoading"
        @loaded="handleLoaded"
        @error="handleError"
        @progress="handleProgress"
        @model-change="handleModelChange"
      />
      
      <div v-else class="no-models">
        <p>请添加至少一个模型</p>
      </div>
      
      <div class="examples">
        <h3>示例模型:</h3>
        <div class="example-list">
          <div 
            v-for="example in exampleModels" 
            :key="example.url"
            class="example-item"
            @click="addExample(example)"
          >
            {{ example.name }}
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import MultiModelViewer from './MultiModelViewer.vue';
  
  const backgroundColor = ref('#f0f0f0');
  const defaultModelColor = ref('#aaaaaa');
  const targetSize = ref(3.0);
  const modelList = ref([]);
  
  const exampleModels = ref([
    {
      name: 'Damaged Helmet',
      type: 'glb',
      url: 'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.glb',
      color: '#aaaaaa'
    },
    {
      name: 'Lucy',
      type: 'obj',
      url: 'https://threejs.org/examples/models/obj/lucy/Lucy100k.obj',
      color: '#aaaaaa'
    },
    {
      name: '卡车',
      type: '3mf',
      url: 'https://dev-flsuncloud.oss-cn-hangzhou.aliyuncs.com/model/8f87766abb303b47545497b164c54340.3mf',
      color: '#aaaaaa'
    },
    {
      name: '鹦鹉',
      type: 'fbx',
      url: 'https://threejs.org/examples/models/fbx/Parrot.fbx',
      color: '#ffaa00'
    },
    {
      name: '茶壶',
      type: 'stl',
      url: 'https://threejs.org/examples/models/stl/teapot-binary.stl',
      color: '#aaffaa'
    }
  ]);
  
  function addModel() {
    modelList.value.push({
      name: '',
      type: 'glb',
      url: '',
      color: defaultModelColor.value
    });
  }
  
  function removeModel(index) {
    modelList.value.splice(index, 1);
  }
  
  function addExample(example) {
    modelList.value.push({...example});
  }
  
  function handleLoading(isLoading) {
    console.log('Loading:', isLoading);
  }
  
  function handleLoaded(index) {
    console.log(`模型 ${index + 1} 加载完成`);
  }
  
  function handleError(error) {
    console.error('加载错误:', error);
  }
  
  function handleProgress(progress) {
    console.log('加载进度:', progress);
  }
  
  function handleModelChange(index) {
    console.log(`切换到模型 ${index + 1}`);
  }
  </script>
  
  <style scoped>
  .model-viewer-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .global-controls {
    margin: 20px 0;
    padding: 25px;
    background: #f5f5f5;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .control-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .control-group label {
    font-weight: bold;
    min-width: 80px;
  }
  
  input[type="color"] {
    width: 60px;
    height: 40px;
    padding: 2px;
    border: 1px solid #ddd;
  }
  
  input[type="range"] {
    width: 150px;
  }
  
  input[type="text"] {
    padding: 8px;
    min-width: 200px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  button {
    padding: 10px 20px;
    background: #09f;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
  }
  
  button:hover {
    background: #07d;
    transform: translateY(-2px);
  }
  
  .remove-btn {
    padding: 5px 10px;
    background: #f44336;
  }
  
  .remove-btn:hover {
    background: #d32f2f;
  }
  
  .model-list {
    margin: 20px 0;
  }
  
  .model-item {
    margin-bottom: 15px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
  }
  
  .model-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  
  .no-models {
    padding: 50px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 10px;
    margin: 20px 0;
  }
  
  .examples {
    margin-top: 30px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
  }
  
  .example-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
  }
  
  .example-item {
    padding: 12px 20px;
    background: #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .example-item:hover {
    background: #d0d0d0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  </style>